<template>
  <div class="app-container home">
    <el-row :gutter="20" class="page-header">
      <el-col :span="24">
        <h1 class="page-title">毕业论文管理系统</h1>
        <p class="page-subtitle">个人论文进度与信息管理平台</p>
      </el-col>
    </el-row>

    <el-divider />

    <!-- 个人信息模块 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-user-circle"></i>
            <span>个人信息</span>
          </div>
          <div class="card-body">
            <div class="user-avatar">
              <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" />
            </div>
            <div class="user-details">
              <p><strong>姓名：</strong>{{ userInfo.name || '未设置' }}</p>
              <p><strong>学号：</strong>{{ userInfo.studentId || '未设置' }}</p>
              <p><strong>专业：</strong>{{ userInfo.major || '未设置' }}</p>
              <p><strong>班级：</strong>{{ userInfo.class || '未设置' }}</p>
              <p><strong>指导老师：</strong>{{ userInfo.teacher || '未分配' }}</p>
              <p><strong>联系方式：</strong>{{ userInfo.contact || '未设置' }}</p>
            </div>
            <el-button type="primary" size="small" @click="editUserInfo" class="edit-btn">
              <i class="el-icon-edit"></i> 编辑信息
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 毕业论文信息模块 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-document"></i>
            <span>毕业论文信息</span>
          </div>
          <div class="card-body">
            <p><strong>论文题目：</strong>{{ paperInfo.title || '未设置' }}</p>
            <p><strong>论文类型：</strong>{{ paperInfo.type || '未设置' }}</p>
            <p><strong>开题时间：</strong>{{ paperInfo.proposalDate || '未设置' }}</p>
            <p><strong>提交时间：</strong>{{ paperInfo.submitDate || '未设置' }}</p>
            <p><strong>当前进度：</strong>
              <el-progress 
                :percentage="paperInfo.progress || 0" 
                :status="getProgressStatus(paperInfo.progress)"
                :stroke-width="8"
              />
            </p>
            <p><strong>论文状态：</strong>
              <el-tag :type="getStatusType(paperInfo.status)">
                {{ paperInfo.status || '未开始' }}
              </el-tag>
            </p>
            <el-button type="primary" size="small" @click="viewPaperDetails" class="edit-btn">
              <i class="el-icon-view"></i> 查看详情
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 论文结论模块 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-finished"></i>
            <span>论文结论</span>
          </div>
          <div class="card-body">
            <div v-if="conclusionInfo.isCompleted">
              <p><strong>最终成绩：</strong>
                <el-tag type="success" size="large">{{ conclusionInfo.score || '未评定' }}</el-tag>
              </p>
              <p><strong>评审意见：</strong>{{ conclusionInfo.comment || '暂无' }}</p>
              <p><strong>完成时间：</strong>{{ conclusionInfo.completeDate || '未设置' }}</p>
              <p><strong>答辩情况：</strong>{{ conclusionInfo.defenseResult || '未答辩' }}</p>
              <p class="conclusion-content">{{ conclusionInfo.summary || '暂无结论总结' }}</p>
            </div>
            <div v-else class="no-conclusion">
              <el-empty description="论文尚未完成" :image-size="120" />
              <p class="empty-tip">请继续完成论文相关工作</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 论文进度追踪 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <i class="el-icon-timer"></i>
            <span>论文进度追踪</span>
          </div>
          <div class="card-body">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in progressHistory"
                :key="index"
                :timestamp="item.time"
                :type="item.type"
                :icon="item.icon"
              >
                <h3>{{ item.title }}</h3>
                <p>{{ item.content }}</p>
              </el-timeline-item>
              <el-timeline-item
                v-if="progressHistory.length === 0"
                timestamp="--"
                type="info"
              >
                暂无进度记录
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑个人信息对话框 -->
    <el-dialog
      title="编辑个人信息"
      :visible.sync="editDialogVisible"
      width="500px"
    >
      <el-form :model="tempUserInfo" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="tempUserInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="tempUserInfo.studentId"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="tempUserInfo.major"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="tempUserInfo.class"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="tempUserInfo.contact"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUserInfo">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'NewIndex',
  data() {
    return {
      defaultAvatar: '/avatar/default.jpg',
      editDialogVisible: false,
      tempUserInfo: {},
      userInfo: {
        name: '张三',
        studentId: '2021001001',
        major: '计算机科学与技术',
        class: '计科1班',
        teacher: '李教授',
        contact: '13800138000'
      },
      paperInfo: {
        title: '基于深度学习的智能推荐系统研究',
        type: '学术论文',
        proposalDate: '2024-03-15',
        submitDate: '2024-06-15',
        progress: 65,
        status: '进行中'
      },
      conclusionInfo: {
        isCompleted: false,
        score: '',
        comment: '',
        completeDate: '',
        defenseResult: '',
        summary: ''
      },
      progressHistory: [
        {
          title: '开题报告提交',
          content: '成功提交开题报告并通过审核',
          time: '2024-03-20 14:30',
          type: 'success',
          icon: 'el-icon-check'
        },
        {
          title: '文献综述完成',
          content: '完成文献综述部分，共引用30篇相关文献',
          time: '2024-04-10 09:15',
          type: 'primary',
          icon: 'el-icon-document'
        },
        {
          title: '实验数据收集',
          content: '完成实验数据收集工作，共采集5000条样本数据',
          time: '2024-05-05 16:45',
          type: 'info',
          icon: 'el-icon-data-line'
        },
        {
          title: '初稿完成',
          content: '完成论文初稿撰写，待导师审阅',
          time: '2024-05-25 11:20',
          type: 'warning',
          icon: 'el-icon-edit'
        }
      ]
    }
  },
  computed: {
    // 计算属性可以在这里添加
  },
  created() {
    // 可以在这里调用API获取真实数据
    this.loadUserData()
    this.loadPaperData()
  },
  methods: {
    // 获取进度状态样式
    getProgressStatus(progress) {
      if (progress >= 100) return 'success'
      if (progress >= 60) return 'primary'
      if (progress >= 30) return 'warning'
      return 'info'
    },
    // 获取状态标签类型
    getStatusType(status) {
      switch (status) {
        case '未开始': return 'info'
        case '进行中': return 'primary'
        case '已完成': return 'success'
        case '已提交': return 'warning'
        case '已审核': return 'success'
        case '已驳回': return 'danger'
        default: return 'info'
      }
    },
    // 编辑个人信息
    editUserInfo() {
      this.tempUserInfo = { ...this.userInfo }
      this.editDialogVisible = true
    },
    // 保存个人信息
    saveUserInfo() {
      // 这里可以调用API保存数据
      this.userInfo = { ...this.tempUserInfo }
      this.editDialogVisible = false
      this.$message.success('个人信息更新成功')
    },
    // 查看论文详情
    viewPaperDetails() {
      // 这里可以跳转到论文详情页面或打开详情对话框
      this.$message.info('跳转到论文详情页面')
    },
    // 加载用户数据
    loadUserData() {
      // 模拟API调用，实际项目中应替换为真实的API请求
      // this.$api.userInfo().then(res => {
      //   this.userInfo = res.data
      // })
    },
    // 加载论文数据
    loadPaperData() {
      // 模拟API调用，实际项目中应替换为真实的API请求
      // this.$api.paperInfo().then(res => {
      //   this.paperInfo = res.data
      // })
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.info-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.card-header {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.card-header i {
  margin-right: 8px;
  color: #409EFF;
}

.card-body {
  padding: 20px 0;
}

.user-avatar {
  text-align: center;
  margin-bottom: 20px;
}

.user-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #409EFF;
}

.user-details p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.edit-btn {
  margin-top: 15px;
  width: 100%;
}

.conclusion-content {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  line-height: 1.8;
}

.no-conclusion {
  text-align: center;
  padding: 20px 0;
}

.empty-tip {
  margin-top: 15px;
  color: #909399;
}

.el-timeline-item__timestamp {
  font-size: 12px;
}

.el-timeline-item__content {
  min-height: 60px;
}

.el-timeline-item__content h3 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: bold;
}

.el-timeline-item__content p {
  margin: 0;
  color: #606266;
}
</style>